<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>LZXリファレンス dragstate</title>
  <othercredit role="translator">
    <firstname>Atuo</firstname>
    <surname>Seki</surname>
        <contrib>2006/05/11　翻訳初版</contrib>
 </othercredit>
<link rel="STYLESHEET" type="text/css" href="./styles.css" /></head>
<body>

<!-- ===================================================================== -->
<!-- = XML information goes here                                         = -->
<!-- ===================================================================== -->
<lzelement title="Dragstate">
    <lztier>Utility Component</lztier>
    <lzcategory>State</lzcategory>
    <lzshortdesc>
            基本的なドラッグの機能。
    </lzshortdesc>
    <lztag>utils/states/dragstate.xml</lztag>
</lzelement>
<p>
dragstateクラスはどんなviewもドラッグを可能にします。
dragstateを適用した時、dragstateがviewをマウスで持てるようにするでしょう。
</p>
<example class="program" id="dragstate-1" title="Simple use of a dragstate">
&lt;canvas width="200" height="100"&gt;
    &lt;view bgcolor="blue" width="20" height="20"
          onmousedown="dragger.apply()" onmouseup="dragger.remove()"&gt;
        &lt;dragstate name="dragger"/&gt;
    &lt;/view&gt;
&lt;/canvas&gt;
</example>

<example class="program" id="dragstate-2" title="Horizontal drag">
&lt;canvas width="200" height="100"&gt;
    &lt;view bgcolor="red" width="20" height="20"
          onmousedown="dragger.apply()" onmouseup="dragger.remove()"&gt;
        &lt;dragstate name="dragger" drag_axis="x"/&gt;
    &lt;/view&gt;
&lt;/canvas&gt;
</example>

<example class="program" id="dragstate-3" 
    title="Horizontal drag with simple bounds checking">
&lt;canvas width="200" height="100"&gt;
    &lt;view bgcolor="red" width="20" height="20"
          onmousedown="dragger.apply()" onmouseup="dragger.remove()"&gt;
        &lt;dragstate name="dragger" drag_axis="x"
                drag_min_x="0"  drag_max_x="100"/&gt;
    &lt;/view&gt;
&lt;/canvas&gt;
</example>

<example class="program" id="dragstate-4"
    title="Drag within bounds of parent view">
&lt;canvas width="500" height="350"&gt;
    &lt;view bgcolor="blue" x="100" y="40" width="300" height="200"&gt;
        &lt;view bgcolor="red" width="20" height="20"
              onmousedown="dragger.apply()" onmouseup="dragger.remove()"&gt;
            &lt;dragstate name="dragger" drag_axis="both"
                drag_min_x="0"
                drag_max_x="$once{parent.width - this.width}"
                drag_min_y="0"
                drag_max_y="$once{parent.height - this.height}"/&gt;
        &lt;/view&gt;
    &lt;/view&gt;
&lt;/canvas&gt;
</example>
<p>上の例では、ユーザーは青い長方形の領域の中で赤い正方形をドラッグできます。
dragstateの全ての属性はその親の状況から得ている事に注意してください。
したがって、青いviewの幅については例のperent.widthを使用し、
赤い正方形の幅は例のthis.widthを使用しています。
</p>
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
